import React, { Component } from 'react'
import axios from 'axios';

export default class Search extends Component {


    search = () => {
        const { keyWordElement: { value: keyWord } } = this;

        this.props.updateAppState({
            isFirst: false,
            isLoading: true
        })

        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(resp => {
            this.props.updateAppState({
                users: resp.data.items,
                isLoading: false,
            });
        }, err => {
            this.props.updateAppState({
                isLoading: false,
                err: err.message        // 注意：这里要传错误信息 err.message ，不能直接将错误对象传过去
            })
        })
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索 Github 用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="请输入关键词点击搜索" />&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        )
    }
}
